import { Component, Input, OnInit } from '@angular/core';
import { mockRainFall } from '../../Constants';
import { OverviewService } from '../../overview.service';

@Component({
  selector: 'app-rainfall-trend',
  templateUrl: './rainfall-trend.component.html',
  styleUrls: ['./rainfall-trend.component.scss']
})
export class RainfallTrendComponent implements OnInit {

  @Input() data: any

  charts = null;

  constructor(
    // private overviewService: OverviewService,
  ) { }

  ngOnInit() {

  }

  configureChart(chart) {
    if (this.charts) {
      this.charts.destory();
    }
    this.charts = chart;
    this.charts.data(this.data);
    // this.charts.data(mockRainFall);
    this.charts.scale({
      DATETIME: {
        range: [0, 1],
      },
      RAINVALUE: {
        min: 0,
        nice: true,
      },
    });
    this.charts.tooltip({
      showCrosshairs: true, // 展示 Tooltip 辅助线
      shared: true,
    });
    this.charts.line().position('DATETIME*RAINVALUE').label('RAINVALUE');
    this.charts.point().position('DATETIME*value');
    this.charts.render();
  }
  ngOnDestoroy() {
    this.charts?.destory();
  }
}
